<template>
  <div>
    <el-card style="max-width: 1000px; margin: auto; width: 100%">
      <!-- 询价清单 -->
      <div class="section-title">
        <span>询价清单及要求</span>
      </div>
      <el-form>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="客户ID:">
              <el-input v-model="inquiryData.customerId" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="询价编码:">
              <el-input
                v-model="inquiryData.inquiryCode"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <div class="block">
              <el-form-item label="询价日期:">
                <el-date-picker
                  v-model="inquiryDates"
                  type="datetime"
                  placeholder="请选择日期"
                  style="width: 100%"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10">
            <el-form-item label="货物种类:">
              <el-input v-model="inquiryData.cargoType" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="运输方式:">
              <el-select
                v-model="inquiryData.transportMode"
                placeholder="海运/铁路/公路/空运/多联式/散货"
              >
                <el-option
                  v-for="item in transportWay"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="擅长航线:">
              <el-select v-model="inquiryData.route">
                <el-option
                  v-for="option in options"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="起运港:">
              <el-input
                v-model="inquiryData.departurePort"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="目的港:">
              <el-input
                v-model="inquiryData.destinationPort"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="报价条款:">
              <el-select placeholder="请选择 (内销 / 外销)">
                <el-option label="内销" value="0" />
                <el-option label="外销" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="货物描述:">
              <el-input
                v-model="inquiryData.cargoDescription"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="HS编号:">
              <el-input v-model="inquiryData.hsCode" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="柜型选择:">
              <el-select placeholder="请选择 (内销 / 外销)">
                <el-option label="内销" value="0" />
                <el-option label="外销" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 询价产品信息 -->
      <div class="section-title">
        <span>产品信息</span>
      </div>
      <el-table
        :data="proData"
        style="width: 100%"
        stripe
        border
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        class="table-container"
      >
        <el-table-column prop="productNumber" label="产品编号" width="100" />
        <el-table-column prop="productName" label="产品名称" width="180" />
        <el-table-column label="总件数" width="150">
          <template #default="{ row }"
            ><el-input-number
              v-model="row.totals"
              :min="1"
              size="small"
              @change="handleChange(row, 'supportNumber')"
          /></template>
        </el-table-column>
        <el-table-column label="总毛重(kg)" width="150">
          <template #default="{ row }">
            <el-input-number
              v-model="row.grossWeight"
              :min="1"
              size="small"
              @change="handleChange(row, 'supportNumber')"
            />
          </template>
        </el-table-column>
        <el-table-column label="总体积(CBM)" width="150">
          <template #default="{ row }"
            ><el-input-number
              v-model="row.volume"
              :min="1"
              size="small"
              @change="handleChange(row, 'supportNumber')"
          /></template>
        </el-table-column>
        <el-table-column label="总托数" width="150">
          <template #default="{ row }"
            ><el-input-number
              v-model="row.supportNumber"
              :min="1"
              size="small"
              @change="handleChange(row, 'supportNumber')"
          /></template>
        </el-table-column>
      </el-table>
      <div class="section-title">
        <span>报价</span>
      </div>
      <el-table
        :data="proData"
        style="width: 100%"
        stripe
        border
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        class="table-container"
      >
        <el-table-column prop="productNumber" label="产品编号" width="100" />
        <el-table-column prop="productName" label="产品名称" width="180" />
        <el-table-column label="总件数" width="150">
          <template #default="{ row }"
            ><el-input-number
              v-model="row.totals"
              :min="1"
              size="small"
              @change="handleChange(row, 'supportNumber')"
          /></template>
        </el-table-column>
        <el-table-column label="总毛重(kg)" width="150">
          <template #default="{ row }">
            <el-input-number
              v-model="row.grossWeight"
              :min="1"
              size="small"
              @change="handleChange(row, 'supportNumber')"
            />
          </template>
        </el-table-column>
        <el-table-column label="总体积(CBM)" width="150">
          <template #default="{ row }"
            ><el-input-number
              v-model="row.volume"
              :min="1"
              size="small"
              @change="handleChange(row, 'supportNumber')"
          /></template>
        </el-table-column>
        <el-table-column label="总托数" width="150">
          <template #default="{ row }"
            ><el-input-number
              v-model="row.supportNumber"
              :min="1"
              size="small"
              @change="handleChange(row, 'supportNumber')"
          /></template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px">
        <el-button v-if="route.query.isEditing" type="primary" @click="save"
          >编辑</el-button
        >
        <el-button v-if="!route.query.isEditing" type="primary" @click="save"
          >保存</el-button
        >
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-card>
  </div>
</template>
<script setup>
//引入api
import {
  queryInquiryProduct,
  saveInquiryList,
  getInquiryDetail
} from "@/api/forwarderInquiry";
import { ref, onMounted, onBeforeMount } from "vue";
// 引入消息组件
import { ElMessage } from "element-plus";
//引入路由
import { useRouter, useRoute } from "vue-router";
//路由实例
const router = useRouter();
//路由信息对象
const route = useRoute();
// 编辑状态标识
const isEditing = ref(false);

const tableData = ref([{ productNumbes: 1 }]);
// 初始化存储日期的变量
const inquiryDates = ref("");
// 获取当前时间的函数
const getCurrentDateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
const inquiryData = ref({
  cargoDescription: "",
  cargoType: "",
  containerType: "",
  customerId: "",
  departurePort: "上海",
  destinationPort: "",
  hsCode: "8474900",
  inquiryCode: "",
  inquiryDate: "",
  transportMode: "",
  route: ""
});
//运输方式
const transportWay = [
  {
    label: "海运",
    value: "1"
  },
  {
    label: "铁路",
    value: 2
  },
  {
    label: "公路",
    value: "3"
  },
  {
    label: "空运",
    value: 4
  },
  {
    label: "多联式",
    value: 5
  },
  {
    label: "散货",
    value: 6
  }
];
//选择航线
const options = [
  { value: "china-north-america", label: "中国-北美" },
  { value: "china-america-canada", label: "中国-美加" },
  { value: "china-europe", label: "中国-欧洲" },
  { value: "china-australia-new-zealand", label: "中国-澳大利亚/新西兰" },
  { value: "china-central-south-america", label: "中国-中南美" },
  { value: "china-red-sea-mediterranean", label: "中国-红海/地中海" },
  { value: "china-japan-korea-russia", label: "中国-日本/韩国/俄罗斯" },
  { value: "china-southeast-asia", label: "中国-东南亚" },
  { value: "china-middle-east-persian-gulf", label: "中国-中东/波斯湾" },
  { value: "china-middle-east-india-pakistan", label: "中国-中东/印巴" },
  { value: "china-black-sea-adriatic-sea", label: "中国-黑海/压得里亚海" },
  { value: "china-south-america-east-west", label: "中国-南美东/南美西" },
  { value: "china-europe-inland", label: "中国-欧洲内陆" },
  { value: "china-east-africa", label: "中国-东非" },
  { value: "china-west-africa", label: "中国-西非" },
  { value: "china-north-africa", label: "中国-北非" },
  { value: "china-south-africa", label: "中国-南非" },
  { value: "china-caribbean-sea", label: "中国-加勒比海" },
  { value: "china-colon", label: "中国-科隆" },
  { value: "china-india-pakistan", label: "中国-印巴" },
  { value: "china-mainland-hongkong-macao", label: "中国大陆-香港/澳门" }
];
//产品信息
const proData = ref([]);

const reqData = ref([]);

//编码查询订单详情
async function init(id) {
  let res = await getInquiryDetail(id);
  if (res.code == 200) {
    inquiryData.value = res.data;
    console.log(res);
  }
}
//询价产品
async function initProData() {
  const res = await queryInquiryProduct(reqData);
  const defaultData = {
    totals: 1,
    grossWeight: 1,
    volume: 1,
    supportNumber: 1
  };
  proData.value = res.data.data;
}

//保存询价单
async function save() {
  inquiryData.value.inquiryDate = inquiryDates;
  const res = await saveInquiryList(inquiryData.value);
  if (res.code == 200) {
    ElMessage.success("保存成功");
    cancel();
  }
  console.log(res);
}
//取消，返回页面
function cancel() {
  router.push("/forwarder/inquiry");
}
//组件挂载前调用
onBeforeMount(() => {
  init(route.query.id);
});

//组件挂载后执行
onMounted(() => {
  initProData();
  inquiryDates.value = getCurrentDateTime();
});
</script>

<style scoped>
/* 全局页面背景 */
body {
  background-color: #f5f7fa;
  font-family: Arial, sans-serif;
}

/* 卡片样式 */
.el-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
/* 标题栏样式 */
.section-title {
  height: 50px;
  line-height: 50px;
  background-color: #f0f2f5;
  padding-left: 20px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 20px;
}

/* 表单容器样式 */
.form-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
}
/* 表格容器样式 */
.table-container {
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
}

/* 按钮容器样式 */
.button-container {
  margin-top: 20px;
  text-align: right;
}
</style>
